<script lang="ts">
export default {
  name: "RepoCompEntityTable"
}
</script>

<template>
  <!-- 数据表单 -->
  <el-table
      ref="dataTableRef"
      v-loading="false"
      :data="dataState.entityList"
      border
      highlight-current-row
  >
    <!-- 展开列表 -->
    <el-table-column type="expand">
      <template #default="props">
        <el-input v-model="props.row.text" :autosize="{ minRows: 3, maxRows: 100 }" :readonly="true"
                  type="textarea"/>
      </template>
    </el-table-column>

    <!-- 列表 -->
    <el-table-column label="文件名称" min-width="150" prop="originalFilename"/>
    <el-table-column label="下载位置" min-width="150" prop="fileName"/>
    <el-table-column label="文件大小" prop="fileSize" width="100"/>
    <el-table-column label="作者" prop="author" width="200"/>
    <el-table-column label="描述信息" prop="description" width="300"/>
    <el-table-column :formatter="formatDate4elTableColumn" label="版本日期" prop="updateTime" width="250"/>

    <!-- 上传对话框/下载对话框 -->
    <el-table-column align="center" label="操作" width="150">
      <template #default="scope">
        <el-button :icon="Download" circle plain type="primary" @click.stop="handleDownload(scope.row)"/>
        <el-button :icon="Edit" circle plain type="primary" @click.stop="handleEditDialog(scope.row)"/>
        <el-button :icon="Delete" circle plain type="danger" @click.stop="handleDelete(scope.row)"/>
      </template>
    </el-table-column>

  </el-table>

  <!-- 分页工具条 -->
  <pagination v-if="dataState.total > 0" v-model:limit="dataState.queryParams.pageSize"
              v-model:page="dataState.queryParams.pageNum" :total="dataState.total"
              @pagination="handleQuery"/>
</template>

<script lang="ts" setup>
import {onMounted, reactive} from "vue";
import {Download, Delete, Edit} from '@element-plus/icons-vue';

import {
  RepoCompHaasVersionEntity,
  RepoCompQueryParam
} from "@/api/cloud/repository/repocomp/haas/version/types";
import {
  listRepoCompVersionEntityPages,
} from "@/api/cloud/repository/repocomp/haas/version";
import {formatDate4elTableColumn,} from '@/utils/formatter';
import {useRouter} from "vue-router";
import {downloadFiles} from "@/api/cloud/repository/fileupload";

const props = defineProps(['modelType'])
const emit = defineEmits(['rowClick', 'update', 'delete']);// 定义组件的事件通知
const router = useRouter();

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({refreshTable});

// 数据状态：定义
let dataState = reactive({
  // 页面转载状态
  loading: false,
  // 选中ID数组
  ids: [],
  // 记录总数
  total: 0,
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoCompQueryParam,
  // 父节点的ID
  haasId: '',
  // 实体数据
  entityList: [] as RepoCompHaasVersionEntity[],
});

function handleDownload(row: any) {
  let fileName = row.originalFilename;
  let uri = 'http://repository.fox-tech.cn/haas/' + row.hardManufacturer + '/' + row.hardDeviceType + '/' + row.softManufacturer + '/' + row.softDeviceType + '/' + row.fileName;
  downloadFiles(fileName, uri);
}

function handleEditDialog(row: any) {
  emit('update', 'table', 'update', row);
}

function handleDelete(row: any) {
  emit('delete', row);
}

function handleQuery() {
  emit('rowClick', {});

  dataState.loading = true;

  dataState.entityList = [];
  dataState.queryParams.haasId = dataState.haasId;
  listRepoCompVersionEntityPages(dataState.queryParams).then(({data}) => {
    data.list.forEach(value => {
      let item = value;
      item.text = "";
      item.text += "【haasId】" + value.haasId + "\r\n\r\n";
      item.text += "【硬件厂商】" + value.hardManufacturer + "\r\n\r\n";
      item.text += "【硬件型号】" + value.hardDeviceType + "\r\n\r\n";
      item.text += "【软件厂商】" + value.softManufacturer + "\r\n\r\n";
      item.text += "【软件型号】" + value.softDeviceType + "\r\n\r\n";
      item.text += "【MD5校验】" + value.md5 + "\r\n\r\n";
      item.text += "【作者】" + value.author + "\r\n\r\n";
      item.text += "【文件名称】" + value.originalFilename + "\r\n\r\n";
      item.text += "【下载名称】" + value.fileName + "\r\n\r\n";
      item.text += "【下载位置】" + value.uri + "\r\n\r\n";
      item.text += "【文件大小】" + value.fileSize + "\r\n\r\n";
      item.text += "【描述】" + value.description + "\r\n\r\n";

      dataState.entityList.push(item);
    });


    dataState.total = data.total;
    dataState.loading = false;
  });
}

/**
 * 刷新表单
 */
function refreshTable(queryParams: RepoCompQueryParam) {
  dataState.queryParams = queryParams;
  if (dataState.queryParams.ownerId === '') {
    dataState.queryParams.ownerId = undefined;
  }
  if (dataState.queryParams.groupName === '') {
    dataState.queryParams.groupName = undefined;
  }
  if (dataState.queryParams.hardManufacturer === '') {
    dataState.queryParams.hardManufacturer = undefined;
  }
  if (dataState.queryParams.hardDeviceType === '') {
    dataState.queryParams.hardDeviceType = undefined;
  }
  if (dataState.queryParams.softManufacturer === '') {
    dataState.queryParams.softManufacturer = undefined;
  }
  if (dataState.queryParams.softDeviceType === '') {
    dataState.queryParams.softDeviceType = undefined;
  }
  if (dataState.queryParams.keyword === '') {
    dataState.queryParams.keyword = undefined;
  }

  handleQuery();
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  let param = location.search.split('?')[1];
  let searchParams = new URLSearchParams(param);
  dataState.haasId = searchParams.get('haasId') as string;

  handleQuery();
});

</script>
